<template>
    <div class="app">
        <h2 class="tittle">Vue路由测试</h2>
        <!-- 导航区 -->
        <div class="navigate">
            <RouterLink to="/home">首页</RouterLink>
            <RouterLink to="/news">新闻</RouterLink>
            <RouterLink to="/about">关于</RouterLink>
        </div>
        <!-- 展示区 -->
         <div class="main-content">
            <RouterView></RouterView>
         </div>
    </div>
</template>

<script lang="ts" setup name="App">
    import { RouterView,RouterLink } from 'vue-router';
</script>

<style>
    .app{
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>